<template>
  <el-dialog
   :title="dialogTitle"
   :close-on-click-modal="false"
   :visible.sync="visible"
   append-to-body
  >
    <el-checkbox-group v-model="checkList">
      <el-checkbox v-for="role in roleList" :key="role.id" :label="role.roleName" />
    </el-checkbox-group>
    <span slot="footer" class="dialog-footer">
      <el-button @click="visible = false">取消</el-button>
      <el-button type="primary" @click="dataFormSubmit()">确定</el-button>
    </span>
  </el-dialog>
</template>
<script>
export default {
  props: {
    dialogTitle: {
      default: '角色选择'
    }
  },
  data () {
    return {
      visible: false,
      roleList: [],
      checkList: []
    }
  },
  methods: {
    init (userId) {
      this.$http({
        url: this.$http.adornUrl('/sys/role/selectAllRole'), methods: 'get'
      }).then(({data}) => {
        this.roleList = data && data.code === 0 ? data.list : []
      }).then(() => {
        this.visible = true
        if (userId) {
          this.$http({
            url: this.$http.adornUrl('/sys/role/selectByUserId'),
            methods: 'get',
            params: this.$http.adornParams()
          }).then(({data}) => {
            if (data && data.code === 0) {
              for (var i = 0; i < data.list.length; i++) {
                this.checkList.push(data.list[i].roleName)
              }
            }
          })
        }
      })
    },
    dataFormSubmit () {
      this.visible = false
      console.log('select-role.vue:')
      console.log(this.checkList)
      this.$emit('listentToChildEvent', this.checkList)
    }
  }
}
</script>

